<template>
	<!-- 列表  -->
	<view>
		<mescroll-uni  @init="mescrollInit" :height="height + 'px'" :disable-scroll="disableScroll" :down="downOptions" :up="downOptions">

			<view class="my_box base_content" v-if="topicList.length >0">
				<view class="my_box_title"> 话题</view>
				<view class="my_box_topic">
					<view class="topic_info" v-for="(item, index) in topicList" :key="index" @click="gotoTopic(item.id)">
						<image class="topic_img" mode="aspectFill" :src="item.cover"></image>
						<view class="topic_name">{{item.name}}</view>
					</view>
				</view>

			</view>

			<view v-if="articleList.length > 0">
				<list-content  v-for="(item, index) in articleList" :key="index"  :data="item"
							:showFollow="false" :disable-to-home="true" @video_play="videoPlayBack">
				</list-content>
			</view>

			<no-data v-else  :height="height" icon="/static/bg/cat_qz.png" :iconMarginTop="100">
			</no-data>

			<!-- 消息提示 -->
			<u-toast ref="uToast"></u-toast>

		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import ListContent from "@/components/article/listContent.vue";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			// mescroll的高度
			height: [Number, String],
			// 是否禁止滚动, 默认false
			disableScroll: Boolean,
			// 用户id
			username: String
		},
		components:{
			ListContent,
			NoData
		},
		//使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		data() {
			return {
				// 下拉刷新的配置参数
				downOptions: {
					// 禁用
					use: false ,
				},
				// 是否已加载过数据
				isLoaded: false,
				// 话题数据
				topicList: [],
				// 数据
				articleList: [],
			}
		},
		computed: {
			// 是否为当前用户
			isCurrentUser() {
				return !this.username
			}
		},
		created() {
			this.isLoaded = false
		},
		methods: {
			refresh(){
				this.isLoaded = false
				this.initData()
			},
			initData(){
				if(!this.isLoaded){
					this.getTopicInfo()
					this.getData()
					this.isLoaded = true
				}
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 获取话题
			getTopicInfo(){
				let username = this.isCurrentUser?this.$store.state.user.info.username:this.username
				this.$httpApi.baseArticleGet('open/topic/user/joinedList/'+ username,{}).then(({ data }) => {
					if (data.code == "000000") {
						this.topicList =  data.data.records
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {})
			},
			// 获取数据
			getData() {
				let url = this.isCurrentUser?'user/article/index':'open/article/user/'+this.username
				this.$httpApi.baseArticleGet(url,{page:1,size:4,sort:2}).then(({ data }) => {
					if (data.code == "000000") {
						this.articleList =  data.data.records
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {})
			},
			// 前往详情
			gotoTopic(id) {
				uni.navigateTo({
					url: '/pages/topic/topicDetail?id='+id
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.my_box {
		display: flex;
		flex-direction: column;

	}

	.my_box_title {
		font-size: 18px;
		font-weight: 600;
	}

	.my_box_topic {
		display: flex;
		flex-direction: row;
		justify-content: start;
	}

	.topic_info {
		display: flex;
		flex-direction: column;
		width: 54px;
		padding-top: 10px;
		padding-bottom: 5px;
		margin-right: 8px;
	}

	.topic_img {
		width: 54px;
		height: 54px;
		border-radius: 10px;
	}

	.topic_name {
		width: 54px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #565656;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}


</style>
